import React from "react";
import "../mp-design-tokens/components-styles/Button.css";
import Icon from "./Icon.jsx";
import "../mp-design-tokens/components-styles/Overlay.css";

const Button = ({
  disabled = false,
  isBusy = false,
  isBusyText,
  buttonStyle = "brand",
  size = "medium",
  iconLeft,
  text,
  iconRight,
}) => {
  buttonStyle = "button-style-" + buttonStyle;
  size = "button-size-" + size;

  let currentClassName;
  // If not text
  if (text === undefined) {
    currentClassName = `${buttonStyle} ${size} icon-only`;
  } else {
    currentClassName = `${buttonStyle} ${size}`;
  }
  // If busy
  if (isBusy === true) {
    return (
      <button
        type="button"
        className={`button ${currentClassName}`}
        disabled="true"
      >
        <div className="button-box">
          <Icon className="button-is-busy" icon="refresh" />
          {isBusyText !== undefined && (
            <span style={{ paddingTop: `var(--mp-spacing-2)` }}>
              {isBusyText}
            </span>
          )}
        </div>
      </button>
    );
  } else {
    console.log(currentClassName);
    return (
      <button
        type="button"
        className={`button ${currentClassName}`}
        disabled={disabled}
      >
        <div className="overlay"></div>
        <div className="button-box">
          {iconLeft !== undefined && <Icon icon={iconLeft} />}
          {text !== undefined && (
            <span style={{ paddingTop: `var(--mp-spacing-2)` }}>{text}</span>
          )}
          {iconRight !== undefined && <Icon icon={iconRight} />}
        </div>
      </button>
    );
  }
};

export default Button;
